@color-button-text: #bdbdbd;
@color-button-bg: #4a4a4a;
@color-button-bg-top: #5a5a5a;
@color-button-bg-bottom: #444;
@color-border-normal: #171717;
@color-border-focus: #09f;

:host {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 2px;
  overflow: hidden;
  font-size: 1rem;
}

:host[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

:host::shadow editor-buttons-item {
  border-right: 1px solid transparent;
}

:host::shadow editor-buttons-item:first-child{
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

:host::shadow editor-buttons-item:last-child{
  border-right: 0px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

// size

:host.small::shadow editor-buttons-item{
  font-size: 0.8rem;
  padding: .3rem .3rem;
}

:host.large::shadow editor-buttons-item{
  font-size: 1.2rem;
  padding: .5rem 1.5rem;
}

:host.big::shadow editor-buttons-item{
  font-size: 1.4rem;
  padding: .5rem 2rem;
}

// colors

:host.red::shadow editor-buttons-item[selected] {
  color: red;
}

:host.yellow::shadow editor-buttons-item[selected] {
  color: #FFEA0F;
}

:host.white::shadow editor-buttons-item[selected] {
  color: white;
}

:host.purple::shadow editor-buttons-item[selected] {
  color: #9c20fe;
}

:host.orange::shadow editor-buttons-item[selected] {
  color: #f98221;
}

:host.green::shadow editor-buttons-item[selected] {
  color: #58c800;
}

// classical

:host.classical {
  border: 1px solid #1f1f1f;
}

:host.classical::shadow editor-buttons-item {
  background-image: linear-gradient(@color-button-bg-top, @color-button-bg-bottom);
  border: 1px solid #666565;
  border-left: 0px;
  padding: 0.3rem 0.3rem;
}

:host.classical::shadow editor-buttons-item:first-child {
  border-left: 1px solid #666565;
}

:host.classical::shadow editor-buttons-item[selected] {
  background-image: linear-gradient(@color-button-bg-top - 20%, @color-button-bg-bottom - 20%);
  box-shadow: inset 0 2px 20px rgba(0,0,0,0.9);
}

:host.classical::shadow editor-buttons-item[pressed] {
  background-image: linear-gradient(@color-button-bg-top, @color-button-bg-bottom);
  box-shadow: inset 0 2px 20px rgba(0,0,0,0.7);
}
